<template>
  <div class="analysis-card" ref="analysis">
    <el-card shadow="never">
      <div slot="header" class="title">
        <span>国有资产增长分析（近三年）</span>
      </div>
      <echarts id="analysis-card" :options="options" :width="echartWidth" :height="428"/>
    </el-card>
  </div>
</template>

<script>
import Echarts from '../echarts/index.vue'

export default {
  name: 'AnalysisCard',
  components: { Echarts },
  data () {
    return {
      echartWidth: null,
      echartHeight: null,
      options: {
        color: '#975FE4',
        xAxis: {
          type: 'category',
          data: [2019, 2020, 2021, 2022, 2023, 2024, 2025],
          axisTick: {
            alignWithLabel: true
          }
        },
        yAxis: [
          {
            type: 'value',
            name: '净资产（万元）',
            position: 'left',
            nameLocation: 'middle',
            nameTextStyle: {
              color: '#000000',
              fontFamily: 'PingFangSC-Regular',
              fontSize: 12,
              align: 'center',
              lineHeight: 12,
            },
            axisLabel: {
              inside: true,
              verticalAlign: 'middle'
            },
          },
          {
            type: 'value',
            name: '环比增长',
            position: 'right',
            nameLocation: 'middle',
            nameTextStyle: {
              color: '#000000',
              fontFamily: 'PingFangSC-Regular',
              fontSize: 12,
              align: 'center',
              lineHeight: 12,
            },
            min: 0,
            max: 100,
            interval: 20,
            axisLabel: {
              inside: true,
              verticalAlign: 'middle',
              formatter: '{value}%'
            }
          }
        ],
        series: [
          {
            type: 'bar',
            data: [120, 200, 150, 80, 70, 110, 130],
            barWidth: 44
          }
        ]
      }
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.echartWidth = this.$refs.analysis.clientWidth - 40 * 2
      const headerHeight = document.getElementsByClassName('el-card__header')[0].offsetHeight
      this.echartHeight = this.$refs.analysis.clientHeight - headerHeight - 20 * 2
    })
  }
}
</script>

<style lang="scss" scoped>
.analysis-card {
  .el-card {
    /deep/ .el-card__header {
      padding: 15px 20px !important;
    }
  }

  .title {
    line-height: 24px;

    span {
      font-family: PingFangSC-Medium;
      font-size: 16px;
      color: rgba(0, 0, 0, 0.85);
    }
  }
}
</style>